import * as echarts from 'echarts/core';
// 导入所有图表（按需选，若要全量图表可这样写）
import * as charts from 'echarts/charts'; 
// 导入所有组件（如坐标轴、图例等）
import * as components from 'echarts/components'; 
// 导入渲染器（Canvas 或 SVG，根据需求选）
import { CanvasRenderer } from 'echarts/renderers'; 

// 注册所有图表、组件、渲染器
echarts.use([...Object.values(charts), ...Object.values(components), CanvasRenderer]);

// 全局变量，用于存储 ECharts 实例，方便后续销毁旧实例
let myChartFuture; 

// 初始化图表函数
function initFutureForecastChart(dom, dateArr, startData, endData) {
  // 1. 销毁旧的 ECharts 实例（如果存在），避免重复初始化导致的问题
  if (myChartFuture) {
    myChartFuture.dispose();
  }
  // 初始化新的 ECharts 实例，将其绑定到传入的 DOM 容器上
  myChartFuture = echarts.init(dom);

  // 2. 数据校验：检查三个数组的长度是否一致，保证数据能一一对应
  if (dateArr.length !== startData.length || dateArr.length !== endData.length) {
    console.error('日期、起始数据、结束数据三个数组的长度必须一致！');
    return; // 长度不一致时，直接返回，不进行图表渲染
  }

  // 3. 配置 ECharts 的选项，定义图表的各种样式和数据映射规则
  const option = {
    // tooltip 配置：鼠标悬浮时显示的提示信息
    // tooltip: {
    //   trigger: 'item',
    //   formatter: (params) => {
    //     const idx = params.dataIndex;
    //     return `${dateArr[idx]}<br>起始数据: ${startData[idx]}<br>结束数据: ${endData[idx]}`;
    //   }
    // },
    // grid 配置：控制图表在容器中的边距等布局
    grid: { 
      left: '10%', 
      right: '10%', 
      top: '20%', 
      bottom: '10%' 
    },
    // xAxis 配置：配置 X 轴（数值轴）
    xAxis: {
      type: 'value',
      axisLabel: {
        color: '#666',
        fontSize: 12
      }
    },
    // yAxis 配置：配置 Y 轴（类目轴，展示日期）
    yAxis: {
      type: 'category',
      data: dateArr,
      axisLabel: {
        color: '#666',
        fontSize: 12
      }
    },
    // series 配置：配置数据系列，这里用柱状图（bar）来绘制
    series: [
      {
        name: '数据区间',
        type: 'bar',
        // 数据处理，这里将起始数据和结束数据合并展示
        data: startData.map((start, index) => ({
          value: endData[index] - start,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 1, 0,
              [
                { offset: 0, color: '#FF7A59' },
                { offset: 1, color: '#4D83FF' }
              ]
            )
          },
          label: {
            show: true,
            position: 'insideRight',
            formatter: (params) => `${endData[params.dataIndex]}`
          }
        })),
        // 为每个柱子左侧添加起始数据标签
        markLine: {
          data: startData.map((start, index) => ({
            name: `起始数据 ${dateArr[index]}`,
            xAxis: start,
            yAxis: dateArr[index],
            label: {
              show: true,
              position: 'insideLeft',
              formatter: () => start
            },
            lineStyle: {
              normal: {
                type: 'dashed',
                color: '#999'
              }
            }
          }))
        }
      }
    ]
  };

  // 4. 将配置项设置给 ECharts 实例，渲染出图表
  myChartFuture.setOption(option);

  // 5. 监听窗口 resize 事件，当窗口大小变化时，让图表重新适配大小
  window.addEventListener('resize', () => {
    if (myChartFuture) {
      myChartFuture.resize();
    }
  });
}

// 将初始化函数导出，方便在其他文件中引入使用
export { initFutureForecastChart };